<template>
    <nav>
        <RouterLink
            to="/about"
            active-class="active"
            exact-active-class="exactActive"
            >Go to About</RouterLink
        >
        <RouterLink to="/home/123">Go to Home123</RouterLink>
        <RouterLink to="/home">Go to Home</RouterLink>
        <RouterLink to="/login">Go to Login</RouterLink>
    </nav>
    <!-- <RouterView /> -->
    <RouterView v-slot="{ Component }">
        <component :is="Component" view-prop="333" />
    </RouterView>
</template>

<script>
export default {
    name: "App",
};
</script>

<style>
/* 当 router-link 匹配到当前路径的任意部分时应用 */
.router-link-active {
    color: blue;
}

/* 当 router-link 完全匹配到当前路径时应用 */
.router-link-exact-active {
    background-color: black;
}
/* .active {
    color: blueviolet;
}
.exactActive {
    background-color: aqua;
} */
</style>
